<template>
  <el-col class="commodity">
    <el-col class="title">商品列表</el-col>
    <el-col class="screen">
      <el-form :inline="true" size="small" :model="screen" ref="form" label-width="120px">
        <el-form-item label="商品名称：">
          <el-input v-model="screen.com_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="screen.status" clearable placeholder="商品状态" @change="screenfn">
            <el-option label="已上架" :value="1"></el-option>
            <el-option label="未上架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="screen.activity_id" clearable placeholder="活动商品" @change="screenfn">
            <template v-for="(item) in actv_list">
              <!--  -->
              <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
            </template>
            <!-- <el-option label="活动商品" :value="1"></el-option> -->
            <!-- <el-option label="正常商品" :value="0"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="screenfn">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="list_table">
      <el-table :data="commodity_list" border stripe size="small">
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="视频">
          <template slot-scope="scope" >
            <template v-if="scope.row.video_cover">
              <span class="coverimg" @click="playvideo(scope.row)">
                <img :src="scope.row.video_cover" alt srcset />
              </span>
            </template>
            <template v-else>
              <span>暂无视频</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" width="120">
          <template slot-scope="scope">
            <template v-if="scope.row.status === 0">已下架</template>
            <template v-else>在售</template>
          </template>
        </el-table-column>

        <el-table-column label="操 作" min-width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click.native.prevent="check(scope.$index, scope.row)"
              type="primary"
            >
              <i class="el-icon-search"></i> 查看
            </el-button>
            <el-button
              @click.native.prevent="editRow(scope.$index, scope.row)"
              type="warning"
              size="mini"
            >
              <i class="el-icon-edit-outline"></i>
              修改
            </el-button>
            <template v-if="scope.row.path">
              <el-button type="danger" size="mini" @click="upvideo(scope.$index, scope.row)">
                <i class="el-icon-edit"></i>
                修改商品视频
              </el-button>
            </template>
            <template v-else>
              <el-button type="danger" size="mini" @click="upvideo(scope.$index, scope.row)">
                <i class="el-icon-video-play"></i>
                上传商品视频
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="page">
      <el-col :span="5">
        <el-button type="primary" size="mini" @click="addlist">添加商品</el-button>
      </el-col>
      <el-pagination
        ref="pagination"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="12"
        class="page_center"
      ></el-pagination>
    </el-col>
    <el-col class="dg">
      <el-dialog
        title="商品信息"
        :visible.sync="dialog"
        width="960px"
        @close="end"
        :modal-append-to-body="false"
      >
        <el-col>
          <el-col :span="12">
            <span>商品名称：</span>
            <strong>{{ datadetail.name }}</strong>
          </el-col>
          <el-col :span="12">
            <span>商品单价：</span>
            <strong style="color:red;">{{ datadetail.price }}</strong>
          </el-col>
          <el-col>
            <span>商品详情：</span>
            <p
              style="padding-left:4px;padding-top:4px;padding-bottom:4px;"
              v-html="datadetail.content"
            ></p>
          </el-col>
          <el-col>
            <span>商品描述：</span>
            <p style="padding-left:4px;padding-top:4px;padding-bottom:4px;">{{ datadetail.info }}</p>
          </el-col>
          <el-col :span="12">
            <span>商品库存：</span>
            <strong style="color:red;">{{ datadetail.stock }}</strong>
          </el-col>
          <el-col :span="12">
            <span>商品状态：</span>
            <template v-if="datadetail.status">
              <strong style="color:red;">上架中</strong>
            </template>
            <template v-else>
              <strong style="color:red;">已下架</strong>
            </template>
          </el-col>
        </el-col>
        <el-col class="dg_tit">封面</el-col>
        <el-col class="dg_img" :span="14">
          <img :src="datadetail.cover" alt srcset />
        </el-col>
        <el-col class="dg_tit">轮播图</el-col>
        <el-col :span="8" class="item_image">
          <span>图1</span>
          <template v-if="datadetail.image1">
            <img :src="datadetail.image1" alt />
          </template>
          <template v-else>暂无图片</template>
        </el-col>
        <el-col :span="8" class="item_image">
          <span>图2</span>
          <template v-if="datadetail.image2">
            <img :src="datadetail.image2" alt />
          </template>
          <template v-else>暂无图片</template>
        </el-col>
        <el-col :span="8" class="item_image">
          <span>图3</span>
          <template v-if="datadetail.image3">
            <img :src="datadetail.image3" alt />
          </template>
          <template v-else>暂无图片</template>
        </el-col>
        <el-col :span="8" class="item_image">
          <span>图4</span>
          <template v-if="datadetail.image4">
            <img :src="datadetail.image4" alt />
          </template>
          <template v-else>暂无图片</template>
        </el-col>
        <span slot="footer">&nbsp;</span>
      </el-dialog>
    </el-col>
    <template v-if="upvideo_deig">
      <myeiadig>
        <div class="my_tops">
          <span class="el-icon-circle-close" @click="closeendall"></span>
        </div>
        <uplodervideo :com_id="com_id" @upsecction="closeendall"></uplodervideo>
      </myeiadig>
    </template>
    <!-- <template v-if="vedioplays"> -->
    <el-dialog
      title="播放视频"
      :append-to-body="true"
      :visible.sync="vedioplays"
      width="45%"
      @close="veidoend"
    >
      <videoplay :videoPath="videoPath" :video_cover_Path="video_cover_Path"></videoplay>
      <span slot="footer">
        <el-button @click="vedioplays = false">关闭</el-button>
        <!-- <el-button type="primary" @click="">确 定</el-button> -->
      </span>
    </el-dialog>
    <!-- </template> -->
  </el-col>
</template>
<script>
import myeiadig from "@/components/myeialog/myeialog.vue";
import uplodervideo from "@/components/uploadervideo.vue";
import videoplay from "@/components/videoplay.vue";
export default {
  name: "commodity",
  data() {
    return {
      video_cover_Path: "", //封面图片
      videoPath: "", //路径
      vedioplays: false,
      screen: {
        com_name: "",
        region: "",
        page: "",
        status: "",
        activity_id: ""
      },
      page: "",
      commodity_list: [],
      columns: [
        {
          id: "id",
          label: "序号",
          width: "60"
        },
        {
          id: "name",
          label: "商品名称"
        },
        {
          id: "stock",
          label: "商品库存",
          width: "120"
        },
        {
          id: "price",
          label: "商品价格（￥）",
          width: ""
        },
        {
          id: "sales_num",
          label: "商品销量"
        }
      ],
      total: 0,
      dialog: false,
      datadetail: "",
      upvideo_deig: false,
      com_id: 0,
      actv_list: []
    };
  },
  mounted() {
    this.getlist();
    this.get_act_list();
    // this.closeendall();
  },
  components: {
    myeiadig,
    uplodervideo,
    videoplay
  },
  methods: {
    async get_act_list() {
      let data = {
        page: this.page
      };
      let res = await this.$store.dispatch("activity_list_data", data);
      if (!res.code) {
        this.actv_list = res.data;
        // this.dataarr = res.data.map(item => {
        //   item.preview_time = formatDate(item.preview_time);
        //   item.end_time = formatDate(item.end_time);
        //   item.start_time = formatDate(item.start_time);
        //   return item;
        // });
      }
      // console.log(res);
    },
    veidoend() {
      this.vedioplays = false;
      this.videoPath = "";
      this.video_cover_Path = "";
    }, //视频播放关闭
    closeendall() {
      this.upvideo_deig = false;
      this.getlist();
    },
    upvideo(index, row) {
      //打开上传视频
      this.com_id = row.id;
      this.$store.commit("setcom_id", this.com_id);
      this.upvideo_deig = true;
    },
    playvideo(row) {
      //打开播放视频
      console.log(row);
      this.videoPath = row.path;
      this.video_cover_Path = row.video_cover;
      this.vedioplays = true;
    },
    async getlist() {
      //获取商品列表
      let res = await this.$store.dispatch("adminlistcommodity", this.screen);
      if (!res.code) {
        this.commodity_list = res.data.data;
        this.total = res.data.total;
      }
    },
    screenfn() {
      //筛选状态
      this.page = "";
      this.$refs.pagination.internalCurrentPage = 1;
      this.getlist();
    },
    onSubmit() {},
    editRow(index, row) {
      //修改
      // console.log(index, row);
      this.$router.push({
        path: "/home/addcommdity",
        query: {
          id: row.id
        }
      });
    },
    async check(index, row) {
      //查看
      // console.log(index, row);
      this.dialog = true;
      let data = {
        com_id: row.id
      };
      let res = await this.$store.dispatch("getdetail_commodity", data);
      this.datadetail = res.data;
    },
    handleCurrentChange(val) {
      this.screen.page = val;
      this.getlist();
    },
    addlist() {
      //商品列表添加
      this.$router.push({
        path: "/home/addcommdity"
      });
    },
    end() {
      //清空商品信息
      this.dialog = false;
    }
  }
};
</script>
<style lang="scss">
.my_tops {
  background-color: #dbdbdb;
  height: 20px;
  // line-height: 30px;
  // float: right;
  border-radius: 6px;
  span {
    color: #ff7d7d;
    font-size: 20px;
    cursor: pointer;
  }
}
.coverimg {
  display: inline-block;
  width: 35px;
  height: 35px;
  overflow: hidden;
  img {
    width: 100%;
    cursor: pointer;
  }
}
</style>
